

.privateDeploymentWrapper {
  height: 95%;
  box-sizing: border-box;
  .tab {
    color: #333;
    font-size: 16px;
    margin-right: 40px;
  }
  .headerActive {
    font-weight: bold;
    border-bottom: 2px solid #2196F3;
    padding-bottom: 12px;
  }
  .content {
    padding-top: 10px;
    overflow-y: auto;
  }
  .paidUpgrade {
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    border-radius: 24px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    height: 25px;
    background-color: #FD9C27;
    cursor: pointer;
    .icon {
      margin-right: 3px;
      font-size: 16px;
    }
  }
  .privateDeploymentHeader {
    border-bottom: 1px solid #DDDDDD;
  }
  .personalEntrypointInfo {
    color: #333333;
    height: 72px;
    background-color: #F5F5F5;
    padding: 0 31px;
    margin-top: 24px;

    a {
      text-decoration: none;
      margin: 0 3px 0 4px;
    }
  }
  .addWeiXin {
    font-size: 13px;
    font-weight: bold;
    color: #47B14B;
    padding: 2px 10px;
    border-radius: 24px;
  }
  .btnWrapper {
    margin-top: 31px;
    .addPrivateKey {
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 7px 19px;
      border-radius: 5px;
      background-color: #2196F3;
    }
    .detailed {
      color: #2196F3;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .personalEntrypointContent {
    margin-top: 24px;
    .justifyCenter {
      justify-content: center;
    }
    .titleWrapper {
      border-bottom: 1px solid #ccc;
      padding: 0 10px 10px;
      margin-bottom: 10px;
      > div {
        flex: 1;
        text-align: center;
      }
    }
    .companyItem {
      padding: 10px;
      &:hover {
        background-color: #f6f6f6;
      }
      > div {
        flex: 1;
        text-align: center;
        justify-content: center;
      }
      .Radio-box {
        border-color: #47B14B;
      }
      .Radio-box-round {
        background-color: #47B14B;
      }
    }
    .associated {
      color: #2196F3;
    }
    .serverId {
      width: 200px;
      word-break: break-all;
    }
    .start {
      color: #47B14B;
    }
    .companyPrivateKeyItem {
      background-color: #F7F7F7;
      margin-top: 10px;
      padding: 20px;
    }
    .copyWrapper {
      position: absolute;
      right: 10px;
      bottom: 15px;
    }
    .withoutList {
      padding: 60px 0;
      .iconWrapper {
        color: #bdbdbd;
        width: 79px;
        height: 79px;
        border-radius: 50%;
        justify-content: center;
        background-color: #F5F5F5;
        margin-bottom: 20px;
      }
    }
    .applyBtn {
      color: #2196F3;
      font-size: 13px;
      padding: 8px 15px;
      border-radius: 3px;
      text-decoration: none;
      border: 1px solid #2196F3;
    }
  }

  .systemSettingInfo {
    .sysItem {
      padding: 20px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #DDDDDD;
      &:hover {
        background-color: #f6f6f6;
      }
    }
  }

  .privateDesc {
    height: 72px;
    align-items: center;
    background: #F5F5F5;
    border-top: 1px solid #d0d0d0;
    padding: 0 25px;
    display: flex;
    margin-top: 10px;
  }

  .privateLine {
    background: #d0d0d0;
    height: 1px;
    width: 100%;
  }

  .privateTplList {
    align-items: center;
    padding: 19px 40px;
    border: 1px solid #EAEAEA;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customConfigItme {
    border-top: 1px solid #DDDDDD;
    padding: 33px 10px;

    .name {
      width: 110px;
    }
    .setting {
      color: #1890ff;
    }
    .disable span {
      color: #BDBDBD !important;
    }
  }
}

.verifyInfo {
  .divCenter {
    margin: 0 10px 0 0;
  }
}

.privateTplAdd {
  border: 1px solid #ddd;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  &:hover {
    border-color: #9e9e9e;
  }
}

.privateDeploymentDetailedDialog {
  .Button , .mui-dialog-close-btn, .mui-dialog-header, .mui-dialog-footer {
    display: none;
  }
  .mui-dialog-body {
    padding: 40px 24px !important;
  }
  .copy {
    color: #2196F3;
    cursor: pointer;
    margin-left: 13px;
  }
}

.privateDeploymentProjectPopup {
  width: 300px;
  padding: 24px;

  .projectItme {
    padding: 10px 0;
    cursor: pointer;
  }
  .projectItmeActive {
    color: #2196F3;
  }
  .projectWrapper {
    overflow-y: auto;
    min-height: 30px;
    max-height: 400px;
  }
  .btnWrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
  }
  .Button--link:hover {
    color: #2196F3;
  }
  .Button--primary {
    margin-left: 10px;
    background-color: #2196F3;
  }
}

.serviceStatusWebhookUrlTooltip {
  max-width: 560px;
}

.sourcesItemStyle() {
  width: 100%;
  padding-bottom: 25px;
  .title {
    color: #000;
    font-size: 14px;
  }
  & > div {
    flex: 1;
  }
  .showItem {
    text-indent: 30px;
  }
  .url {
    flex: 3;
  }
  .edit {
    color: #1890ff;
  }
}

.sourceListContent {
  border-top: 1px solid #dddddd;
  padding-top: 20px;

  .addButton {
    width: 110px !important;
    padding: 0 10px;
  }
  .titleWrapper {
    font-size: 14px;
    margin: 20px 0;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eaeaea;
  }
  .titleWrapper, .sourcesItem {
    .sourcesItemStyle;
  }
}

.sourcesSortableCard {
  .sourcesItemStyle;
}

.createSourcesDialog {
  .sourcesColor {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    justify-content: center;
  }
  .sourcesIconWrapper {
    flex-wrap: wrap;
  }
  .sourcesIcon {
    width: 30px;
    height: 30px;
    margin: 0 10px 10px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.enableDeclareDialog {
  .mui-dialog-body {
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .ant-tabs {
    flex: 1;
  }
  .ant-tabs-nav-wrap, .ant-tabs-nav-list {
    width: 100%;
  }
  .ant-tabs-tab {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ant-tabs-nav {
    margin-bottom: 0;
  }
  .ant-tabs-ink-bar {
    width: 100px !important;
    margin-left: 170px;
  }
  .ant-tabs-content-holder,
  .ant-tabs-content,
  .enableDeclareRichText,
  .ck-editor,
  .ck-editor__main,
  .ck-content {
    height: 100%;
  }
  .ck-editor__main {
    box-sizing: border-box;
    height: calc(~'100% - 70px') !important;
    overflow: auto;
  }
  .ck .ck-content {
    background-color: #fff !important;
  }
  .ck .ck-content, .ck .ck-content.ck-focused, .editorNull {
    border: none !important;
  }
  .edit{
    &:hover, &:hover .icon {
      color: #2196f3 !important;
    }
  }
  .editFooter {
    display: flex;
    justify-content: flex-end;
  }
}

